import Person from "@/components/Person";
import Search from "@/components/Search";
import Sheet from "@/components/Sheet";
import { Card, Space } from "antd";
import dayjs from "dayjs";
import { useState, useEffect } from "react"; // 添加 useEffect
import { useDispatch } from "react-redux";
import { setShowBtnTool } from "@/store/modules/style";
import BtnTool from "@/components/BtnTool";
import { riskTitleAPI } from "@/apis"; // 引入API方法
import ExcelExporter from '@/utils/exportToExcel';

const columns = [
  {
    title: '年度',
    dataIndex: 'YEAR', // 根据实际API返回字段修改
  },
  {
    title: '风险类型',
    dataIndex: 'FXLX', // 根据实际API返回字段修改
  },
  {
    title: '公司名称',
    dataIndex: 'GSMC' // 根据实际API返回字段修改
  },
  {
    title: '交易金额',
    dataIndex: 'FKJE' // 根据实际API返回字段修改
  },
  {
    title: '交易笔数',
    dataIndex: 'COUNT'
  }
]

export default function Maoyifengxian() {
  const [page, setPage] = useState({ pageNum: 1, pageSize: 10 });
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [dataSource, setDataSource] = useState({ data: [], total: 0 }); // 新增数据状态
  const [searchParams, setSearchParams] = useState({}); // 新增搜索参数状态
  const [loading, setLoading] = useState(false); // 加载状态
  const dispatch = useDispatch();

  // 获取数据方法
  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await riskTitleAPI({
        dataType: 'risktitle', // 固定type值
        pageNum: page.pageNum,
        pageSize: page.pageSize,
        ...searchParams            // 合并搜索参数
      });
      
      // 根据实际API响应结构调整
      setDataSource({
        data: res.data.info || [],
        total: res.data.total || 0
      });
    } catch (error) {
      console.error('数据获取失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 当page或searchParams变化时重新获取数据
  useEffect(() => {
    fetchData();
  }, [page, searchParams]);

  const handleSearch = (values) => {
    // 点击搜索时更新搜索参数，并重置页码
    setSearchParams(values);
    setPage(prev => ({ ...prev, pageNum: 1 }));
  };

  const handlePage = (pageNum, pageSize) => {
    setPage({ pageNum, pageSize });
  };

  const handleSelChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
    dispatch(setShowBtnTool(selectedRowKeys.length > 0));
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: handleSelChange,
  };

  const headers = columns.map(item => ({
    key: item.dataIndex,
    label: item.title,
  }));

  const handleDel = () => {
    // 删除接口（需要根据API调整）
    console.log('删除', selectedRowKeys);
  };

  return (
    <div>
      <h2 className="headline">风险信息</h2>
      <Space direction="vertical" size={16} style={{ width: "100%" }}>
        <Search onSearch={handleSearch} isFengxian></Search>
        <Card>
                    <div className="tableHeader">
                        <h3>明细表</h3>
                         <ExcelExporter
                                data={dataSource.data}
                                headers={headers}
                                fileName={"贸易风险信息.xlsx"}
                                //buttonText="下载工商信息表"
                                type="primary"
                                className="btnSuccess"
                                // style={{ padding: '10px 20px' }}
                        />
                    </div>          
          <Sheet 
            columns={columns} 
            dataSource={{
              data: dataSource.data,
              total: dataSource.total
            }} 
            rowSelection={rowSelection} 
            rowKey='key' 
            page={page} 
            onChange={handlePage}
            loading={loading} // 传递加载状态
          />
        </Card>
      </Space>
      <BtnTool 
        total={`已选择 ${selectedRowKeys.length} 项`} 
        isShow={selectedRowKeys.length > 0} 
        isSave={false} 
        onDel={handleDel}
      />
    </div>
  )
}
// const columns = [
//     {
//         title: '年度',
//         dataIndex: 'YEAR',
//     },
//     {
//         title: '风险类型',
//         dataIndex: 'FXLX',
//     },
//     {
//         title: '公司名称',
//         dataIndex: 'GSMC'
//     },
//     {
//         title: '交易金额',
//         dataIndex: 'FKJE'
//     },
//     {
//         title: '交易笔数',
//         dataIndex: 'COUNT'
//     }
// ]
// const dataSource = {
//     total: 20,
//     data: Array.from({
//         length: 46,
//     }).map((_, i) => ({
//         key: i,
//         content: '2024',
//         type: `ii`,
//         creator: 'jjj',
//         time: 'yy',
//     }))
// };
// export default function Maoyifengxian() {
//     const [page, setPage] = useState({ pageNum: 1, pageSize: 10 })
//     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
//     const dispatch = useDispatch()
//     const handleSearch = (val) => {
//         console.log(val)
//     }
//     // 分页
//     const handlePage = (pageNum, pageSize) => {
//         setPage({
//             pageNum,
//             pageSize
//         })
//     }
//     // 表格选择
//     const handleSelChange = (selectedRowKeys, selectedRows) => {
//         setSelectedRowKeys(selectedRowKeys)
//         dispatch(setShowBtnTool(selectedRowKeys.length > 0))
//     }
//     const rowSelection = {
//         selectedRowKeys,
//         onChange: handleSelChange,
//     };
//     const handleDel = () => {
//         // 删除接口
//         console.log('删除')
//     }
//     return (
//         <div>
//             <h2 className="headline">风险信息</h2>
//             <Space direction="vertical" size={16} style={{ width: "100%" }}>
//                 <Search onSearch={handleSearch} isFengxian></Search>
//                 <Card>
//                     <Sheet columns={columns} dataSource={dataSource} rowSelection={rowSelection} rowKey='key' page={page} onChange={handlePage}></Sheet>
//                 </Card>
//             </Space>
//             {<BtnTool total={`已选择 ${selectedRowKeys.length} 项`} isShow={selectedRowKeys.length > 0} isSave={false} onDel={handleDel}></BtnTool>}
//         </div>
//     )
// }